<template>
  <view class="tree ">
    <view class="node " v-for="(node, index) in list" :key="index">
      <view class="flex flex-row item-center ">
        <view class="flex flex-row item-center node-title between f_1" @click.stop="expandClick(node)">
          <view class="f_1" v-if="node.children && node.children.length">{{node.name}}（12）</view>
          <view class="f_1" v-else @click.stop="selectNode(node)">{{ node.name }}（12）</view>
          <view v-if="node.children && node.children.length" class="icon fs_0">
            <u-icon name="arrow-right" color="#999999" size="14" v-if="!node.expand"></u-icon>
            <u-icon name="arrow-down" color="#999999" size="14" v-else></u-icon>
          </view>
        </view>
      </view>
      <view class="child" v-show="node.expand">
        <Tree
            v-if="node.children && node.children.length"
            :list="node.children"
            @updateExpand="expandClick"
            @selectNode="selectNode"
            class="sub-tree"
        />
      </view>
    </view>
  </view>
</template>

<script>
import Tree from "./Tree.vue";

export default {
  name: "Tree",
  components: {Tree},
  props: {
    list: {
      type: Array,
      default: () => [],
    }
  },
  data() {
    return {}
  },
  mounted() {
  },
  methods: {
    //展开收起
    expandClick(node) {
      console.log(node)
      this.$emit("updateExpand", node)
    },
    //选择节点
    selectNode(node) {
      this.$emit("selectNode", node)
    }
  }
};
</script>

<style scoped lang="scss">
.tree {
  margin-bottom: 32rpx;
  padding-right: 22px;

  .icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
  }

  .node {
    margin-left: 26px;
    position: relative;

    & + .node {
      margin-top: 32rpx;
    }
  }

  .node-title {
    color: #333333;
    font-size: 16px;
  }
}

.sub-tree {
  margin-left: 26rpx;

  .tree{
    padding-right: 0!important;
  }
  .node-title {
    color: #333333;
    font-size: 14px !important;
  }
}


</style>